<template>
  <div class="home">
    <page-header></page-header>
    <div class="banner">
      <img src="static/bannerlogo.png" alt />
      <h2>开域数据可视化平台</h2>
      <p>实时数据连接，快速完成数据可视化让数据分析更加简单！</p>
    </div>
    <div class="product">
      <h2>产品与服务</h2>
      <div class="item">
        <div class="left">
          <el-image lazy src="static/data.png" alt />
        </div>
        <div class="right">
          <h3>数据连接</h3>
          <p>支持MySQL、Excel、csv多种数据连接方式</p>
          <p>MySQL数据库连接支持多种同步方式，支持全量增量同步，灵活管理数据</p>
          <p>Excel、csv文件支持替换数据更新图表</p>
        </div>
      </div>
      <div class="item">
        <div class="right">
          <h3>数据连接</h3>
          <p>MySQL数据库可设置定时同步或手动同步</p>
          <p>原始数据更新，图表即时更新，仪表盘分享同步更新，无需再次画表或分享，快速完成时间迭代，提升效率</p>
        </div>
        <div class="left">
          <el-image lazy src="static/update.png" alt />
        </div>
      </div>
      <div class="container">
        <div class="item">
          <div class="left">
            <el-image lazy src="static/easy.png" alt />
          </div>
          <div class="right">
            <h3>简单易用</h3>
            <p>无需编程，拖拽式选择维度（x轴）和数值（y轴），不懂技术也能轻松完成数据可视化分析</p>
            <p>丰富的图表库，运营数据、财务报表、用户画像，满足各类应用场景</p>
            <p>不同筛选器自由组合，灵活地筛选出所需数据</p>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="right">
          <h3>轻松分享</h3>
          <p>分享的仪表盘可进行图内筛选操作，工作汇报轻松搞定</p>
          <p>其他平台可引用仪表盘，无需前端开发，定制化图表立即呈现</p>
        </div>
        <div class="left">
          <el-image lazy src="static/update.png" alt />
        </div>
      </div>
    </div>
    <div class="solution">
      <h2>行业解决方案</h2>
      <div class="case">
        <div class="wrapper">
          <div class="item">
            <el-image lazy src="static/internet.png" alt />
            <div class="bottom">
              <h3>互联网</h3>
              <p>运营数据轻松分析，数据驱动运营</p>
            </div>
          </div>
          <div class="item">
            <el-image src="static/business.png" alt />
            <div class="bottom">
              <h3>电子商务</h3>
              <p>经营指标直观分析，全面评估店铺</p>
            </div>
          </div>
          <div class="item">
            <el-image lazy src="static/retailx.png" alt />
            <div class="bottom">
              <h3>新零售</h3>
              <p>科学管理用户与门店，提升经营绩效</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>
<script>
import PageHeader from '@/components/PageHeader'
import PageFooter from '@/components/PageFooter'
export default {
  components: {
    PageHeader,
    PageFooter
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/scss/_common.scss';
.home {
  .banner {
    height: 7.3rem;
    padding-left: 1.2rem;
    background: url('../assets/bannerbg.png') no-repeat;
    background-size: 100% 100%;
    img {
      width: 2.73rem;
      height: 0.63rem;
      margin-top: 1.8rem;
    }
    h2 {
      font-size: 60px;
      font-family: $pfh;
      font-weight: 800;
      color: $ff;
      line-height: 0.94rem;
      margin: 0.11rem 0 0.16rem 0;
    }
    p {
      font-size: 20px;
      font-family: $pfr;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.85);
      line-height: 0.31rem;
    }
  }

  .product {
    h2 {
      font-size: 48px;
      font-family: $pfm;
      font-weight: 500;
      color: $bl8;
      line-height: 0.75rem;
      text-align: center;
      position: relative;
      margin-bottom: 0.4rem;
      &::after {
        content: '';
        position: absolute;
        width: 0.8rem;
        height: 0.04rem;
        background: $btn;
        border-radius: 0.02rem;
        top: 0.83rem;
        left: 48%;
      }
    }
    .item {
      display: flex;
      height: 6.8rem;
      padding: 0 1.2rem;
      .left:nth-of-type(1),
      .right:nth-of-type(1) {
        margin-right: 0.8rem;
      }
      .left {
        display: flex;
        align-items: center;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      img {
        width: 5.6rem;
        height: 4.5rem;
      }
      h3 {
        font-size: 36px;
        font-family: $pfh;
        font-weight: 800;
        color: $bl8;
        line-height: 0.56rem;
        margin-bottom: 0.24rem;
      }
      p {
        font-size: 18px;
        font-family: $pfr;
        font-weight: 400;
        color: $bl6;
        line-height: 0.28rem;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: -0.2rem;
          top: 0.1rem;
          width: 0.08rem;
          height: 0.08rem;
          border: 0.02rem solid $bl6;
          border-radius: 50%;
        }
      }
    }
    .item:nth-of-type(2) {
      background: $main;
      h3 {
        color: $ff;
      }
      p {
        color: rgba(255, 255, 255, 0.85);
        &::after {
          border: 0.02rem solid #58ffff;
        }
      }
    }
    .container {
      padding: 0 1.2rem;
      .item {
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
      }
    }
  }
  .solution {
    h2 {
      font-size: 48px;
      font-family: $pfm;
      font-weight: 500;
      color: $bl8;
      line-height: 0.75rem;
      text-align: center;
      position: relative;
      margin: 0.4rem 0 1.72rem 0;
      &::after {
        content: '';
        position: absolute;
        width: 0.8rem;
        height: 0.04rem;
        background: $btn;
        border-radius: 0.02rem;
        top: 0.83rem;
        left: 48%;
      }
    }
    .case {
      height: 5rem;
      background: $main;
      .wrapper {
        display: flex;
        justify-content: center;
        position: relative;
        top: -0.8rem;
        .item {
          width: 3.5rem;
          text-align: center;
          transition: all 0.5s;
          cursor: pointer;
          &:hover {
            transform: scale(1.1);
          }
          .bottom {
            background: $ff;
            padding-bottom: 0.16rem;
          }
          img {
            width: 100%;
            height: 3.21rem;
          }
          h3 {
            font-size: 36px;
            font-family: $pfm;
            font-weight: 500;
            color: $bl8;
            line-height: 0.56rem;
            margin-bottom: 0.08rem;
          }
          p {
            font-size: 18px;
            font-family: $pfr;
            font-weight: 400;
            color: $bl6;
            line-height: 0.28rem;
          }
        }
        .item:not(:last-child) {
          margin-right: 0.75rem;
        }
      }
    }
  }
}
</style>
